<route lang="json5" type="imgCropper">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '提交头像',
  },
}
</route>
<template>
  <view class="container">
    <wd-img-cropper
      v-model="show"
      :img-src="src"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    ></wd-img-cropper>
    <view class="profile">
      <view class="img" @click="upload">
        <wd-icon name="fill-camera" custom-class="img-icon"></wd-icon>
      </view>
      <wd-img
        round
        width="200px"
        height="200px"
        :src="imgSrc"
        mode="aspectFit"
        custom-class="profile-img"
        @click="upload"
      />
      <view style="font-size: 14px">点击上传头像</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const src = ref<string>('')
const imgSrc = ref<string>('')
const show = ref<boolean>(false)

// 初始化
onLoad(() => {
  upload()
})

function upload() {
  console.log('选择图片'),
    uni.chooseImage({
      count: 1,
      success: (res) => {
        const tempFilePaths = res.tempFilePaths[0]
        src.value = tempFilePaths
        show.value = true
      },
    })
}
function handleConfirm(event) {
  const { tempFilePath } = event
  imgSrc.value = tempFilePath
  console.log('完成', event.tempFilePath)
}
function imgLoaderror(res) {
  console.log('加载失败', res)
}
function imgLoaded(res) {
  console.log('加载成功', res)
}
function handleCancel(event) {
  console.log('取消', event)
}
</script>

<style scoped>
.container {
  height: 100vh;
}
</style>
